<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="box">
        <!-- 
            在一个组件中存在多个 需要双向操作的数据变量时，如何通过v-model完成全部绑定功能
        -->
        <h4>父组件</h4>
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <p>info:{{ info }}</p>
        <input type="text" v-model="info">
        <br><br>
        <!-- 
        vue2.0 在设计时就只允许一个组件定义一个v-model，所以在组件语法处理上需要对v-model的功能进行单独定义和描述
               vue2.0 的组件存在一个 model 属性，取值 object={ prop:"拦截属性名",event:"事件名" }
        vue2.0 组件的多变量的双向共享语法糖 v-bind:属性名.sync
                => .sync 修饰是在属性绑定的同时，自动完成事件绑定
                例如  v-bind:info.sync 的操作如下
                        1. v-bind:info 属性绑定
                        2. v-on:update:info 事件绑定
        -->
        <comp-one v-model="msg" v-bind:info.sync="info" ></comp-one>
    </div>

    <script type="text/x-template" id="compOne">
        <div class="box">
            <h4>子组件</h4>
            <p>modelValue:{{ modelValue }}</p>
            <input type="button" value="更新modelValue" @click="upateModelValue()">
            <p>info:{{ info }}</p>
            <input type="button" value="更新info" @click="upateInfo()">
        </div>
    </script>

    <script src="../../assets/mock/mock-min.js"></script>
    <script type="module"> 
        import Vue from "../../assets/vue2/vue.esm.browser.js";
        Vue.component("CompOne",{
            template:"#compOne",
            model:{
                // prop 描述了组件绑定v-model 在分解成 v-bind 的属性参数为 model-value
                prop:"modelValue",
                // event 描述组件绑定 v-model 在分解成 v-on 的事件参数为 update:model-value
                event:"update:modelValue"
            },
            props:{
                modelValue:{
                    default:"",
                    type:String
                },
                info:{
                    default:"",
                    type:String
                }
            },
            methods: {
                upateModelValue() {
                    this.$emit("update:modelValue",Mock.mock("@cword"))
                },
                upateInfo(){
                    this.$emit("update:info",Mock.mock("@cword"))
                }
            },
        })
        new Vue({
            el:"#app",
            data(){
                return {
                    msg:"默认值msg",
                    info:"默认值info"
                }
            }
        });
    </script>
</body>
</html>